<!-- 设备交接高级搜索 -->
<template>
    <div class="e-form">
        <el-form ref="form" :model="formData" label-width="100px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="机构：">
                        <el-input
                            v-model="orgName"
                            placeholder="请选择机构"
                            readonly
                        >
                            <i slot="suffix" class="el-input__icon el-icon-document-copy" @click="selectOrg"></i>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="type == 1">
                    <el-form-item label="验收编号：">
                        <el-input
                            v-model="formData.checkNum"
                            placeholder="请输入验收编号"
                            readonly
                        >
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="type == 2">
                    <el-form-item label="调入单位：">
                        <el-input
                            v-model="formData.checkNum"
                            placeholder="请输入调入单位"
                            readonly
                        >
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="type == 3">
                    <el-form-item label="转移编号：">
                        <el-input
                            v-model="formData.billNo"
                            placeholder="请输入转移编号"
                            readonly
                        >
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="type == 4">
                    <el-form-item label="接收单位：">
                        <el-input
                            v-model="formData.receiveOrgId"
                            placeholder="请输入接收单位"
                            readonly
                        >
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" v-if="type == 3">
                    <el-form-item label="设备：">
                        <el-input
                            v-model="formData.equipment"
                            placeholder="请输入设备"
                            readonly
                        >
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="type == 4">
                    <el-form-item label="退场编号：">
                        <el-input
                            v-model="formData.billNo"
                            placeholder="请输入退场编号"
                            readonly
                        >
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="日期：">
                        <el-date-picker type="date" placeholder="选择开始日期" value-format="yyyy-MM-dd" v-model="formData.startTime"  style="width: 47%;"></el-date-picker>
                        <div class="separ el-icon-minus"></div>
                        <el-date-picker type="date" placeholder="选择结束日期" value-format="yyyy-MM-dd" v-model="formData.endTime"  style="width: 47%;"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="状态：">
                        <CheckAll :chackdData.sync="stateForm" @checkdData="checkedStates" ref="checkedState"/>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import CheckAll from '@/components/common/checkAll'
import { selectChildrenOrg } from '@/api/equip/popupCallback.js'
export default {
    data () {
        return {
            checkAll: false,
            isIndeterminate: false,
            checkedState: [], //选择的状态
            orgName: '', //机构名称
            formData: {
                'checkNum': '',
                'endTime': '',
                'founderId': '',
                'keyword': '',
                'limit': 20,
                'loginOrgId': '',
                'orgId': localStorage.getItem('searchOrgId'),
                'page': 1,
                'startTime': '',
                'states': [],
                'transferUnit': '', //调入单位
                'billNo': '', //租赁退场编号/转移编号
                'receiveOrgId': '', //接收单位
                'equipment': '',
            },
            type: this.$route.query.type,  // 1(采购验收\租赁验收) 2设备交接 3临租转长租  4租赁退场
        }
    },
    components: {
        CheckAll
    },
    computed: {
        ...mapState({
            stateForm: state => state.equip.equipData.state //状态
        }),
        statusLable () {
            return param=> {
                const state =  this.$store.state.equip.equipData.state
                const obj = state.find(x=>x.value === param)
                return obj.label
            }
        },
    },
    watch: {
        formData: {
            handler (newVal) {
                this.setSearchData({ equipSearchData: newVal })
            },
            deep: true
        }
    },
    mounted () {
    },
    methods: {
        ...mapMutations(['setSearchData']),
        //本机构及下级机构
        async selectOrg () {
            let data =  await selectChildrenOrg()
            this.orgName = data[0].orgName
            this.formData.orgId =  data[0].orgId
        },
        //获取选中的状态
        checkedStates (states) {
            this.formData.states = states
        }
    },
}
</script>

<style lang='scss' scoped>
.separ{
        display: inline-block;
        font-weight: bold;
        width: 4%;
        margin: 0 1% 0 1%;
        text-align: center;
    }
  .e-form {
    padding: 20px;
}

</style>
